<template>
  <div class="app-container">
    <div class="gradient-border" id="box">{{realList.dateTime}}</div>
    <div id="title" style="font-size: 20px;font-weight: bold">原水水质</div>
    <div id="oneData">
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">盖竹原水浊度</span><span style="font-size: 12px">&nbsp;(NTU)</span></div>
        <div id="rustData">{{realList.mit101T}}</div>
      </div>
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">盖竹原水<span style="font-size: 12px">&nbsp;(PH)</span></span></div>
        <div id="rustData">{{realList.ait101Ph}}</div>
      </div>
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">盖竹原水温度</span><span style="font-size: 12px">&nbsp;(℃)</span></div>
        <div id="rustData">{{realList.ait101T}}</div>
      </div>
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">高楼原水浊度</span><span style="font-size: 12px">&nbsp;(NTU)</span></div>
        <div id="rustData">{{realList.jnyszd}}</div>
      </div>
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">高楼原水<span style="font-size: 12px">&nbsp;(PH)</span></span></div>
        <div id="rustData">{{realList.jnysph}}</div>
      </div>
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">暂无</span></div>
        <div id="rustData">{{realList.dataZw}}</div>
      </div>
    </div>
    <div id="title" style="font-size: 20px;font-weight: bold">一期工艺参数</div>
    <div id="oneData">
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">进水流量</span><span style="font-size: 12px">&nbsp;(m³/h)</span></div>
        <div id="rustData">{{realList.yqJsll}}</div>
      </div>
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">石灰投加量</span><span style="font-size: 12px">&nbsp;(KG/KT)</span></div>
        <div id="rustData">{{realList.shsjtjll4}}</div>
      </div>
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">沉淀后浊度</span><span style="font-size: 12px">&nbsp;(NTU)</span></div>
        <div id="rustData">{{realList.ditt11}}</div>
      </div>
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">加药流量</span><span style="font-size: 12px">&nbsp;(m³/h)</span></div>
        <div id="rustData">{{realList.yqJySsll}}</div>
      </div>
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">加药投加量</span><span style="font-size: 12px">&nbsp;(KG/KT)</span></div>
        <div id="rustData">{{realList.yqTjlShow}}</div>
      </div>
      <div class="two-center-block">
        <div id="rust"><span style="font-size: 18px">暂无</span></div>
        <div id="rustData">{{realList.dataZw}}</div>
      </div>
    </div>
    <div id="title" style="font-size: 20px;font-weight: bold">二期工艺参数</div>
    <div id="twoData">
      <div class="two-center-block">
        <div><span style="font-size: 18px">进水流量</span><span style="font-size: 12px">&nbsp;(m³/h)</span></div>
        <div id="rustData">{{realList.fit102}}</div>
      </div>
      <div class="two-center-block">
        <div><span style="font-size: 18px">石灰投加量</span><span style="font-size: 12px">&nbsp;(KG/KT)</span></div>
        <div id="rustData">{{realList.shsjtjll2}}</div>
      </div>
      <div class="two-center-block">
        <div><span style="font-size: 18px">1#沉淀后浊度</span><span style="font-size: 12px">&nbsp;(NTU)</span></div>
        <div id="rustData">{{realList.cdc1ZdZ}}</div>
      </div>
      <div class="two-center-block">
        <div><span style="font-size: 18px">2#沉淀后浊度</span><span style="font-size: 12px">&nbsp;(NTU)</span></div>
        <div id="rustData">{{realList.cdc2ZdZ}}</div>
      </div>
      <div class="two-center-block">
        <div><span style="font-size: 18px">加药流量</span><span style="font-size: 12px">&nbsp;(m³/h)</span></div>
        <div id="rustData">{{realList.eqJySsll}}</div>
      </div>
      <div class="two-center-block">
        <div><span style="font-size: 18px">加药投加量</span><span style="font-size: 12px">&nbsp;(KG/KT)</span></div>
        <div id="rustData">{{realList.yqTjlShow}}</div>
      </div>
    </div>

  </div>
</template>

<script>
import {listReal} from "@/api/system/real";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 角色表格数据
      realList: {
        yqJsll: "",
        fit102: "",
        mit101T: "",
        ait101Ph: "",
        ait101T: "",
        jnyszd: "",
        jnysph: "",
        shsjtjll4: "",
        shsjtjll2: "",
        ditt11: "",
        cdc1ZdZ: "",
        cdc2ZdZ: "",
        yqJySsll: "",
        eqJySsll: "",
        yqTjlShow: "",
        eqTjlShow: "",
        dateTime: "",
        dataZw: ""
      },
      intervalId: null, // 用于保存定时器的ID
    };
  },
  created() {
    this.getList();
    // 创建定时器，每秒执行一次queryApi方法
    this.intervalId = setInterval(this.getList, 5000);

  },
  methods: {
    /** 查询实时数据 */
    getList() {
      console.log(1);
      this.loading = true;
      listReal().then(response => {
          this.realList = response.data;
          this.realList.dataZw = "/";
          this.loading = false;
        }
      );
    }
  },
  beforeDestroy() {
    // 清除定时器
    clearInterval(this.intervalId);
  },
};
</script>

<style>
#title {
  width: 10rem;
  padding: 1rem;
}
#oneData {
  text-align: left;
}

#twoData {
  text-align: center;
}
.two-center-block {
  width: 16.66%;
  padding: 1rem;
  border: 1px solid #263140;
  display: inline-block;
  background-color: #f6f6f6;
}
.two-center-block div {
  margin: 0 auto;
  width: 12rem;
  padding: 1rem;
}
#rustData {
  color: #d69b44;
  text-align: center;
}
#rust{
  text-align: center;
}


#box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  color: white;
  font-size: 1rem;
  float: right;
}
.gradient-border {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
